import { useMemo } from 'react';
import { useSelector } from 'react-redux';
import { useThemeMenu } from './useThemeMenu';
import { RootState } from 'src/store';
// 处理侧导主题
export function useThemeHeader() {
  const { isLayoutTop, isLayoutSider } = useThemeMenu();
  const { header, root } = useSelector((state: RootState) => state.theme.pageTheme);
  const { show, fixed } = header;
  const { showLogo } = root;
  // 显示mix模式的header
  const showMixHeader = useMemo(() => {
    return !isLayoutSider && show;
  }, [show, isLayoutSider]);

  // 显示内联的header
  const showInsetHeader = useMemo(() => {
    return show && (isLayoutTop || !showMixHeader);
  }, [show, showMixHeader, isLayoutTop]);

  const showOuterHeader = useMemo(() => {
    return show && !isLayoutTop && showMixHeader;
  }, [show, isLayoutTop, showMixHeader]);

  const showLogoHeader = useMemo(() => {
    return showLogo && !isLayoutSider;
  }, [showLogo, isLayoutSider]);

  return {
    show,
    fixed,
    showMixHeader,
    showInsetHeader,
    showOuterHeader,
    showLogoHeader,
  };
}
